<template>
  <NuxtLayout>
    <div class="main-container">
      <div class="search-info">
        <el-input v-model="kw" class="search-input" placeholder="请输入搜索内容" @keyup.enter="handleSearch">
          <template #append>
            <span class="cursor" @click="handleSearch">搜索</span>
          </template>
        </el-input>
      </div>
      <el-tabs v-model="activeName" @tab-change="handleSearch">
        <el-tab-pane label="考试" name="exam"></el-tab-pane>
      </el-tabs>
      <div class="search-result">搜索结果：{{ page.totalCount }} 个</div>
      <div v-if="activeName === 'exam'">
        <exam-list :list="page.list" />
      </div>
      <common-pagination v-model:current-page="page.pageCurrent" v-model:page-size="page.pageSize" :total="page.totalCount" @pagination="handlePage" />
    </div>
  </NuxtLayout>
</template>
<script setup>
  import useTable from '~/utils/table.js'
  import { examApi } from '~/api/exam'

  useHead({
    title: '全站搜索'
  })

  const activeName = ref('exam')
  const route = useRoute()
  const router = useRouter()
  const kw = ref(route.query.kw)
  const apis = { page: examApi.examList }
  const paras = { courseName: kw.value || '' }

  function handleSearch() {
    if (kw.value === '') {
      return
    }

    if (activeName.value === 'exam') {
      apis.page = examApi.examList
      router.push({ path: '/search', query: { kw: kw.value } })
      query.examName = kw.value
      handleQuery()
    }
  }

  // 分页查询
  const { page, handlePage, query, handleQuery } = useTable(apis, paras)
</script>
<style lang="scss" scoped>
  .search-info {
    width: 650px;
    margin: 0 auto;

    .search-input {
      margin: 20px auto 10px;
      height: 50px;
    }
  }

  .search-result {
    margin-bottom: 20px;
  }

  :deep(.el-input-group__append) {
    background-color: $main-color;
    color: #ffffff;
    width: 65px;
    font-size: 17px;
    cursor: pointer;
  }
</style>
